<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            margin-top: 10px;
        }

        video {
            width: 600px;
        }
    </style>
</head>

<body>
    <button class="btn">切换</button>
    <div class="wrap">
        <video src="../video/b.mp4"></video>
    </div>

    <!-- <video src="../video/c.mp4" controls muted loop autoplay></video> -->
    <!-- <textarea name="" id="" cols="30" rows="10" maxlength=""></textarea> -->
    <!-- <input type="file" multiple> -->
</body>
<script>
    var btn = document.getElementsByClassName("btn")[0];
    var video = document.getElementsByTagName("video")[0];
    var isPlay = false;

    btn.onclick = function () {
        // video.controls = true;
        // video.muted = true;
        // video.autoplay = true;  // 是否自动播放
        // video.loop = true;
        if (isPlay == false) {
            video.play();
            isPlay = true;
        } else {
            video.pause();
            isPlay = false;
        }
    }

    // 元素节点的属性
    // 元素节点 => 对象 => 修饰该元素的属性(官方给定-> 特性)
    console.dir(video);

    // 通用
    // innerHTML
    // innerText
    // textContent
    // value

    // id
    // className
    // classList
    // title
    // dataset
    // tagName
    // style
    // window.getComputedStyle()

    // 某些元素独有的
    // href
    // src
    // name
    // type
    // placeholder
    // value
    // min max step
    // cols rows maxlength

    // select -> value  selectedIndex

    // 表单状态
    // disabled
    // required
    // hidden
    // checked
    // multiple

    // audio video
    // controls
    // muted
    // autoplay
    // loop




















</script>

</html>